<template>
    <div>
        <el-table :data="userList" border style="width: 100%">
            <el-table-column prop="uid" label="用户编号">
            </el-table-column>
            <el-table-column prop="username" label="用户名称">
            </el-table-column>
            <el-table-column prop="rolename" label="所属角色">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="item">
                    <div>
                        <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="item">
                    <div>
                        <el-button type="primary" circle icon="el-icon-edit" @click="edit(item.row.uid)">
                        </el-button>
                        <el-button type="danger" circle icon="el-icon-delete" @click="del(item.row.uid)">
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" class="sumit" :page-size="size"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from "vuex";
// 引入接口地址
import { userDelete } from "../../request/api"
export default {
    computed: {
        ...mapGetters({
            // 获取页面展示条数
            size: "user/getSize",
            total: "user/getTotal",
            // 获取管理员总数
            total: "user/getTotal",
            // 获取管理员当前页列表信息
            userList: "user/getUserList"
        })
    },
    methods: {
        // 点击编辑按钮
        edit(id) {
            this.$emit("edit", id)
        },
        ...mapActions({
            // 渲染当前页用户列表信息
            getUserList: "user/userList_Action",
            // 渲染管理员总数
            getUseCount: "user/userCount_Action",
            // 改变当前页数
            changePageAction: "user/changePage_Action"
        }),
        // 点击改变当前页管理员信息
        changePage(e) {
            // 调用行动传递参数
            this.changePageAction(e)
        },
        // 点击删除管理员信息
        del(uid) {
            // 调用管理员删除接口
            userDelete({ uid }).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg)
                    // 重新渲染管理员总数
                    this.getUseCount()
                    // 重新渲染当前页管理员列表
                    this.getUserList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
    mounted() {
        // 渲染管理员总数 
        this.getUseCount()
        // 渲染当前页用户列表信息
        this.getUserList()
    }
};
</script>

<style scoped>
.sumit {
    margin-top: 30px;
    position: absolute;
    right: 50px;
}
</style>
